import React, { useState } from 'react';
import { Input, Tag, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';

interface TagManagerProps {
  value?: string[];
  onChange?: (tags: string[]) => void;
}

export const TagManager: React.FC<TagManagerProps> = ({ value = [], onChange }) => {
  const { t } = useTranslation();
  const [inputValue, setInputValue] = useState('');

  const handleInputConfirm = () => {
    if (inputValue && !value.includes(inputValue)) {
      const newTags = [...value, inputValue];
      onChange?.(newTags);
      setInputValue('');
    }
  };

  const handleClose = (removedTag: string) => {
    const newTags = value.filter(tag => tag !== removedTag);
    onChange?.(newTags);
  };

  return (
    <div>
      <Space size={[0, 8]} wrap className="tag-list">
        {value.map(tag => (
          <Tag
            key={tag}
            closable
            onClose={() => handleClose(tag)}
          >
            {tag}
          </Tag>
        ))}
      </Space>
      <Input
        type="text"
        size="small"
        className="tag-input"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
        onPressEnter={handleInputConfirm}
        onBlur={handleInputConfirm}
        placeholder={t('article.form.addTag')}
        prefix={<PlusOutlined />}
      />
    </div>
  );
};